<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制 - VR-IoT</title>
    <!-- 国际化支持 -->
    <script src="../../pwa-main/js/i18n.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
            padding: 16px;
            min-height: 100vh;
        }
        
        body.dark-theme {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        h1 {
            margin-bottom: 24px;
            font-size: 24px;
        }
        
        .device-section {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        body.dark-theme .device-section {
            background-color: #2d2d2d;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        .device-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .device-name {
            font-size: 18px;
            font-weight: bold;
        }
        
        .device-toggle {
            position: relative;
            width: 50px;
            height: 24px;
        }
        
        .device-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #007bff;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        
        .device-controls {
            margin-top: 16px;
        }
        
        .control-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }
        
        body.dark-theme .control-item {
            border-bottom: 1px solid #444;
        }
        
        .control-item:last-child {
            border-bottom: none;
        }
        
        .control-label {
            font-size: 14px;
        }
        
        .slider {
            width: 60%;
            height: 6px;
            border-radius: 3px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }
        
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
        }
        
        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
        }
        
        .no-devices {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        
        body.dark-theme .no-devices {
            color: #666;
        }
    </style>
</head>
<body data-auto-init-sdk="true">
    <div class="container">
        <h1 data-i18n="control.title">设备控制</h1>
        
        <div class="device-section">
            <div class="device-header">
                <span class="device-name" data-i18n="control.light">智能灯光</span>
                <label class="device-toggle">
                    <input type="checkbox">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="device-controls">
                <div class="control-item">
                    <span class="control-label" data-i18n="control.brightness">亮度</span>
                    <input type="range" min="1" max="100" value="70" class="slider">
                </div>
                <div class="control-item">
                    <span class="control-label" data-i18n="control.colorTemp">色温</span>
                    <input type="range" min="1" max="100" value="50" class="slider">
                </div>
            </div>
        </div>
        
        <div class="device-section">
            <div class="device-header">
                <span class="device-name" data-i18n="control.ac">智能空调</span>
                <label class="device-toggle">
                    <input type="checkbox">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="device-controls">
                <div class="control-item">
                    <span class="control-label" data-i18n="control.temperature">温度 (°C)</span>
                    <input type="range" min="16" max="30" value="25" class="slider">
                </div>
                <div class="control-item">
                    <span class="control-label" data-i18n="control.fanSpeed">风速</span>
                    <input type="range" min="1" max="3" value="2" class="slider">
                </div>
            </div>
        </div>
    </div>
    
    <script src="../../pwa-main/js/frame-sdk.js"></script>
    <script>
        // 初始化变量
        let currentLang = 'zh-CN';
        let temperatureUnit = 'celsius'; // 默认摄氏度
        let preloadSettings = null;
        
        // 监听预加载设置消息
        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'PRELOAD_SETTINGS') {
                console.log('接收到预加载设置:', event.data.settings);
                preloadSettings = event.data.settings;
                
                // 如果i18n已经加载，立即应用预加载设置
                if (window.i18n && preloadSettings.language) {
                    currentLang = preloadSettings.language;
                    window.i18n.setLanguage(preloadSettings.language);
                }
                
                // 应用温度单位设置
                if (preloadSettings.temperatureUnit) {
                    temperatureUnit = preloadSettings.temperatureUnit;
                }
            }
        }, { once: true });
        
        // 更新页面标题的函数
        function updatePageTitle() {
            if (window.i18n && window.frameSDK) {
                const title = window.i18n.t('control.title');
                window.frameSDK.updateTitle(title);
                document.title = title + ' - VR-IoT';
                console.log('control页面标题已更新:', title);
            }
        }
        
        // 更新温度单位的函数
        function updateTemperatureUnits() {
            const temperatureDisplays = document.querySelectorAll('.temperature-value');
            const unit = temperatureUnit === 'celsius' || (window.i18n && window.i18n.getLanguage() === 'zh-CN') ? '°C' : '°F';
            temperatureDisplays.forEach(display => {
                const currentValue = parseFloat(display.textContent);
                if (!isNaN(currentValue)) {
                    display.textContent = currentValue + unit;
                }
            });
        }
        
        // 确保主框架语言变更时也能更新
        if (window.frameSDK) {
            window.frameSDK.on('SETTINGS_UPDATE', (settings) => {
                if (settings.language && window.i18n) {
                    console.log('control页面接收到SETTINGS_UPDATE消息，语言变更为:', settings.language);
                    // 当收到设置更新时，i18n.setLanguage已经被调用，languageChanged事件会被触发
                }
            });
        }
        
        // 监听页面切换时的标题刷新请求
        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'REFRESH_TITLE') {
                console.log('接收到标题刷新请求');
                updatePageTitle();
                updateTemperatureUnits();
            }
        });
        
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', () => {
            // 等待i18n模块加载完成
            if (window.i18n) {
                // 如果有预加载设置，先应用语言设置
                if (preloadSettings && preloadSettings.language) {
                    currentLang = preloadSettings.language;
                    window.i18n.setLanguage(preloadSettings.language);
                } else {
                    currentLang = window.i18n.getLanguage();
                }
                
                // 更新所有带i18n属性的元素
                window.i18n.updateAllElements();
            }
            
            // 设置页面标题
            if (window.frameSDK && window.i18n) {
                updatePageTitle();
                window.i18n.updateAllElements();
                updateTemperatureUnits();
            }
            
            // 设备控制逻辑
            const sliders = document.querySelectorAll('input[type="range"]');
            
            // 滑块控制事件处理
            sliders.forEach(slider => {
                slider.addEventListener('input', function() {
                    const deviceId = this.getAttribute('data-device') || this.closest('.device-section').querySelector('.device-name').textContent;
                    const controlType = this.getAttribute('data-control') || this.closest('.control-item').querySelector('.control-label').textContent;
                    const value = this.value;
                    console.log(`Device ${deviceId}, ${controlType}: ${value}`);
                });
            });
        });
    </script>
</body>
</html>